<template>
  <div class="title-container">
    <div class="vertical-line"></div>
    <h2 class="title-text">{{ title }}</h2>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

// 定义组件接收的属性
const props = defineProps({
  title: {
    type: String,
    required: true
  }
});
</script>

<style scoped>
.title-container {
  display: flex;         /* 使用 Flexbox 进行布局 */
  align-items: center;   /* 垂直居中对齐 */
  margin: 20px 0;      /* 上下边距 */
}

.vertical-line {
  width: 3px;          /* 竖线的宽度 */
  height: 30px;        /* 竖线的高度 */
  background-color: #4CAF50; /* 竖线颜色 */
  margin-right: 10px;  /* 竖线与标题之间的间距 */
}

.title-text {
  font-size: 24px;     /* 字体大小 */
  color: #333;         /* 字体颜色 */
  margin: 0;           /* 去掉默认的外边距 */
}
</style>
